<template>
  <div>
    <van-nav-bar
      title="订单结果"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      订单提交成功!快去支付吧
    </van-divider>
    <van-cell-group inset>
      <van-cell title="订单编号" :value="order.orderId" />
      <van-cell title="订单状态" :value="order.orderStatus.orderstatusName" />
      <van-cell title="订单创建时间" :value="order.orderCreatetime" />
      <van-cell title="商品"  is-link :value="order.orderName" />
      <van-cell title="支付金额" :value="order.orderPaidmoney" />
      <van-cell title="实际支付" :value="order.orderPaidmoney" />
      <div v-if="time>0">
        <van-cell title="请尽快支付" :value="order.orderPaidmoney">
            <van-count-down :time="time" format=" 剩余 mm 分 ss 秒" />
        </van-cell>
      </div>
    </van-cell-group>
    <div class="bottombar">
      <van-button round  color="linear-gradient(to right,#8a2387,#e94057,#f27121)">积分兑换</van-button>
      <van-button round  color="linear-gradient(to right,#8a2387,#e94057,#f27121)" @click="goBuy(order)">余额兑换</van-button>
      <van-button round  color="linear-gradient(to right,#8a2387,#e94057,#f27121)" @click="gopay(order)">立即支付</van-button>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant';
export default {
    data() {
        return {
          orderId: this.$route.query.orderId,
          order: {},
          time: 30*60*1000,
          userInfo: {
            memberCardno: 9999,
            memberId: 1,
            memberJifen: 1,
            memberLevel: 1,
            memberMoney: 1000,
            memberUserId: 1,
            sysMemberLevel: { sysMemberLevelId: 1, sysMemberLevelName: "银卡" },
          },
        };
  },

  created: function () {
    this.$axios
      .get("/order/select/" + this.orderId)
      .then((res) => {
        if (res.data.code == 200) {
          this.order = res.data.info;
          var now=new Date().getTime();
          var endstr=this.order.orderCreatetime;
          var end_str=endstr.replace(/-/g,"/");
          //-般得到的时间的格式都是：yyyy-MM-ddhh24:mi:ss,所以我就用了这个做例子，是/的格式，就不用replace了
          var start=new Date(end_str).getTime();
          //将字符串转化为时间
          this.time=30*60*1000-(now-start);
          //console.log(this.images);
        }
      })
      .catch((error) => {
        console.log("请求订单数据失败了");
      });

      this.$axios
      .get("/user/member")
      .then((res) => {
        if (res.data.code == 200) {
          this.userInfo = res.data.info;
        }
      })
      .catch((error) => {
        console.log("请求个人信息失败了");
      });
  },

  methods: {
    onClickLeft: function () {
      this.$router.push("/first");
    },

    goBuy(order){
      if(this.userInfo.memberMoney>=order.orderPaidmoney){
        let params = new URLSearchParams();
        params.append('orderId', order.orderId);
        this.$axios
        .post("/order/goBuy",params)
        .then(res=>{
            if(res.data.code==200){
              this.$router.push({path:"/paySuccess",query:{"out_trade_no":order.orderId,"total_amount":order.orderPaidmoney}})
            }
        })
        .catch(error=>{
          console.log(error);
        });
      }else{
        Notify({ type: 'danger', message: '余额不足，无法兑换',duration: 2000,});
      }
    },

    gopay(order){
      let params = new URLSearchParams();
      params.append('outTradeNo', order.orderId);
      params.append('subject', order.orderName);
      params.append('totalAmount', order.orderPaidmoney);
      params.append('description', order.orderName);
      console.log(params);
      this.$axios
      .post("/order/alipay",params)
      .then(res=>{
        console.log(res.data);
        const divForm = document.getElementsByTagName('div');
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        const div = document.createElement('div');
        console.log(div);
        div.innerHTML = res.data; // data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        document.forms[0].setAttribute('target', '_blank'); // 新开窗口跳转
        document.forms[0].submit();
      })
      .catch(error=>{
        console.log(error);
      }); 
    },
  },
};
</script>
<style scoped>
.bottombar{
  text-align: right;
  width: 100%;
  height: 50px;
  background-color:  #0c162847;
  position: absolute;
  bottom: 50px;
  right: 0;
}
</style>